<!DOCTYPE html>
<html class="loginHtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>登录--学生请假管理系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/resources/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<style>
		html, body {width: 100%;height: 100%;overflow: hidden}
		body {background: #f0f0f0;}
		body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
		.layui-container {background:url("/resources/images/background.jpg") no-repeat center center;background-size:100% 100%;width: 100%;height: 100%;overflow: hidden;}
		.admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-185px;margin-top:-110px;}
		.logo-img {width:30px;height:30px;margin-right: 10px;}
		.logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
		.logo-title h1 {color:#0f1427;font-size:25px;font-weight:bold;}
		.login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
		.login-form .layui-form-item {position:relative;}
		.login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
		.login-form .layui-form-item input {padding-left:36px;}
		.captcha {width:60%;display:inline-block;}
		.captcha-img {display:inline-block;width:34%;float:right;}
		.captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
		.layui-btn-normal{background-color:#0f1427}
		.register{text-align: center;padding-top: 10px;}
		.register a {color: #00a1d6}
	</style>
</head>
<body>
<div class="layui-container">
	<div class="admin-login-background">
		<div class="layui-form login-form">
			<form class="layui-form" action="">
				<div class="layui-form-item logo-title">
					<p style="font-weight: bold;font-size: 22px;"><img src="/resources/images/face.jpg" class="logo-img">学生请假系统登录</p>
				</div>
				<div class="layui-form-item">
					<label class="layui-icon layui-icon-username"></label>
					<input type="text" name="loginname" lay-verify="required|account" lay-reqtext="用户名不能为空!" placeholder="请输入用户名" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="layui-icon layui-icon-password"></label>
					<input type="password" name="password" lay-verify="required|password" lay-reqtext="密码不能为空!" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-item" >
					<label class="layui-icon layui-icon-vercode"></label>
					<input type="text" name="code"  placeholder="请输入验证码" lay-verify="required" lay-reqtext="验证码不能为空!" autocomplete="off" class="layui-input verification captcha">
					<div class="captcha-img">
						<!-- 验证码 显示 -->
						<img class="layadmin-user-login-codeimg" id="LAY-user-get-vercode" οnclick="javascript:getVerCode()" />
					</div>
				</div>
				<!--				<div class="layui-form-item">-->
				<!--					<input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">-->
				<!--				</div>-->
				<div class="layui-form-item">
					<button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 录</button>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript" src="/resources/layui/layui.js"></script>

<script type="text/javascript">
	layui.use(['form','layer','jquery'],function(){
		var form = layui.form,
				layer = parent.layer === undefined ? layui.layer : top.layer
		$ = layui.jquery;


		//登录按钮
		form.on("submit(login)",function(data){
			var btn =  $(this);
			//设置登录按钮  为不可点击
			btn.text("登录中...").attr("disabled","disabled").addClass("layui-disabled");
			$.post("/sys_login",data.field,function(rs){
				//设置登录按钮 恢复可点击   在前端防止 重复点击
				btn.text("登录").attr("disabled",false).removeClass("layui-disabled");
				layer.msg(rs.msg);
				if(rs.code != 200){
					layer.msg(rs.msg);
				}else{
					//跳转到index.html页面
					layer.msg(rs.msg);
					location.href="/sys/index";
				}
			});
			return false;
		})

		//表单输入效果
		$(".loginBody .input-item").click(function(e){
			e.stopPropagation();
			$(this).addClass("layui-input-focus").find(".layui-input").focus();
		})
		$(".loginBody .layui-form-item .layui-input").focus(function(){
			$(this).parent().addClass("layui-input-focus");
		})
		$(".loginBody .layui-form-item .layui-input").blur(function(){
			$(this).parent().removeClass("layui-input-focus");
			if($(this).val() != ''){
				$(this).parent().addClass("layui-input-active");
			}else{
				$(this).parent().removeClass("layui-input-active");
			}
		})
	})

	getVerCode();
	/**
	 * 获取验证码
	 * 将验证码写到login.html页面的id = LAY-user-get-vercode 的地方
	 */
	function getVerCode() {
		document.getElementById("LAY-user-get-vercode").src = timestamp("/verifyCode");
	}
	//为url添加时间戳
	function timestamp(url) {
		var getTimestamp = new Date().getTime();
		if (url.indexOf("?") > -1) {
			url = url + "&timestamp=" + getTimestamp
		} else {
			url = url + "?timestamp=" + getTimestamp
		}
		return url;
	};

</script>
</body>
</html>